<!DOCTYPE html>
<html class="x-admin-sm">

<head>
    <meta charset="UTF-8">
    <title>ginadmin</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi"/>
    <link rel="stylesheet" href="./css/font.css">
    <link rel="stylesheet" href="./css/xadmin.css">
    <script type="text/javascript" src="./lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="./js/jquery.min.js"></script>
    <script type="text/javascript" src="./js/xadmin.js"></script>
    <script type="text/javascript" src="./js/utils.js"></script>
    <!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
    <!--[if lt IE 9]>
    <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
    <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <![endif]--></head>

<body>
<div class="layui-fluid">
    <div class="layui-row">
        <form class="layui-form">
            <div class="layui-form-item">
                <label class="layui-form-label">
                    <span class="x-red">*</span>上级菜单</label>
                <div class="layui-input-inline">
                    <select name="menu" lay-verify="required" id="menuselect">
                        <option value="0">无</option>
                    </select>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">
                    <span class="x-red">*</span>菜单名称</label>
                <div class="layui-input-inline">
                    <input type="text" id="name" name="name" required="" lay-verify="required" autocomplete="off"
                           class="layui-input"></div>
                <input type="text" id="menuid" name="menuid" style="display: none;">
            </div>
    <div class="layui-form-item">
        <label class="layui-form-label">
            <span class="x-red">*</span>菜单url</label>
        <div class="layui-input-inline">
            <input type="text" id="url" name="url" required="" lay-verify="required" autocomplete="off"
                   class="layui-input"></div>
    </div>
    <div class="layui-form-item" style="text-align: center;">
        <button class="layui-btn" lay-filter="add" lay-submit="">增加</button>
    </div>
    </form>
</div>
</div>
<script>
    var form, $;
    var type = 'add';

    $(function () {
        let name = getUrlParam("name");
        let menuid = getUrlParam("menuid");
        let url = getUrlParam("url");

        if (menuid != undefined) {
            type = 'update'
            $("#menuid").val(menuid)
            $("#name").val(name)
            $("#url").val(url)
        }
    })

    layui.use(['form', 'layer'],
        function () {
            $ = layui.jquery;
            form = layui.form;
            var layer = layui.layer;

            //获取select 数据
            getSelectData();

            //监听提交
            form.on('submit(add)', function (data) {
                let pathurl = '/web/menu/add';
                if (type == "update") {
                    pathurl = '/web/menu/update';
                }
                console.log(data)
                console.log(data.field)
                httpRequest(pathurl, $(data.form).serialize(), function (res) {
                    if (res.code == 200) {
                        layer.msg("操作成功")
                        var index = parent.layer.getFrameIndex(window.name);
                        //关闭当前frame
                        parent.layer.close(index);
                        parent.location.reload()
                    } else {
                        layer.msg("添加失败:" + res.msg)
                    }
                });
                return false;
            });

        });

    function getSelectData() {
        httpGetRequest("/web/menu/list", {}, function (res) {
            if (res.code == 200) {
                let menudata = res.data
                for (var i = 0; i < res.data.length; i++) {
                    $("#menuselect").append("<option value=" + res.data[i].ID + ">" + res.data[i].Name + "</option>");
                }
                //渲染select
                form.render()
            } else {
                layer.msg("获取失败:" + res.msg)
            }
        });
    }
</script>

</body>

</html>